<template>
  <div class="container">
    <div class="scroll-view">
      <div class="top">
        <div class="ordernum">订单编号：{{list.orderSn}}</div>
        <div class="info">
          <div class="imgbox">
            <img :src="project_img" alt class="headimg" />
          </div>
          <div class="right">
            <div class="title">{{list.projectName}}</div>
            <div class="hos">{{list.hospitalName}}</div>
          </div>
        </div>
        <div class="point">
          补贴单共包含
          <!-- <div class="num">{{list.totalCredit?list.totalCredit:0}}</div> -->
        </div>
        <div class="desc">
          <!-- 金币 -->
          <div class="jinb" v-if="list.allGold>0">
            {{list.allGold}}
            <img
              :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
              alt
              class="icon"
            />
          </div>

          <!-- 银币 -->
          <div class="yinb" v-if="list.allSilver>0">
            {{list.allSilver}}
            <img
              :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
              alt
              class="icon"
            />
          </div>
        </div>
        <div class="progress">
          第01期
          <div class="progressbar">
            <div class="mark" :style="{'width':leftnum+'px'}">
              <div class="item">
                <!-- 第一期待返 -->
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/icon_tempo_subsidy.png'"
                  alt
                  class="icon"
                  :style="{'right':'-12px'}"
                  v-if="marknum  == 1"
                />
                <!-- 第2-35期待返 -->
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/icon_tempo_subsidy.png'"
                  alt
                  class="icon"
                  v-if=" 1 < marknum && marknum <36 "
                  :style="{'left':leftnum-4+'px'}"
                />
                <!-- 37期待返----补贴完成状态 -->
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/icon_tempo_subsidy.png'"
                  alt
                  class="icon"
                  :style="{'right':'-1px'}"
                  v-if="marknum == 36"
                />
              </div>
            </div>
          </div>
          第{{list.applyCount}}期
          <div class="tips" :style="{'left':leftnum+20+'px'}" v-if="marknum == 1">
            <!-- 第1期待补贴 -->
            {{text}}
          </div>
          <div
            class="tips"
            :style="{'left':leftnum+29+'px'}"
            v-if=" 1 < marknum && marknum < 36"
          >{{text}}</div>
          <div class="tips" :style="{'left':leftnum+18+'px'}" v-if="marknum == 36">
            <!-- 第37期待补贴 表示补贴已完成 -->
            {{text}}
          </div>
        </div>
      </div>
      <div class="member" @click="todetail" v-if="isSpeed=='false'">
        <!-- <a href="/pages/package_mine/my_subsidy/main"> -->
        <img
          src="https://img.ameimeika.com/h5_images/mp_images/mp_3.1.1/bt/ic_crown.png"
          alt
          class="icon1"
          v-if="isMember == 0"
        />
        {{membertext}}
        <img
          src="https://img.ameimeika.com/h5_images/mp_images/mp_3.1.1/bt/icon_more.png"
          alt
          class="icon"
        />
        <!-- </a> -->
      </div>
      <div class="listbox">
        <ul class="tab">
          <li class="item left" @click="tabevent(1)" :class="current==1?'item1':'item4'">
            <!-- <div class="title"> -->
            <div class="style1" :class="(list.awaitGold == 0 &&list.awaitSilver == 0)?'style2':''">
              待返{{list.applyCount - list.allowancedCount }}期
            </div>
            <div class="num">
              <div class="jinb" v-if="list.awaitGold>0">
                {{list.awaitGold}}
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
                  alt
                  class="icon"
                />
              </div>
              <div class="yinb"  v-if="list.awaitSilver>0">
                {{list.awaitSilver}}
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
                  alt
                  class="icon"
                />
              </div>
            </div>
            <!-- </div> -->
          </li>
          <li class="item right" @click="tabevent(2)" :class="current==2?'item2':'item3'">
            <!-- <div class="title title1"> -->
            <div class="style1" :class="(list.grantGold == 0 &&list.grantSilver == 0)?'style2':''">
              已返{{list.allowancedCount}}期
            </div>

            <div class="num">
               <div class="jinb" v-if="list.grantGold>0">
                {{list.grantGold}}
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
                  alt
                  class="icon"
                />
              </div>
              <div class="yinb" v-if="list.grantSilver>0">
                {{list.grantSilver}}
                <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
                  alt
                  class="icon"
                />
              </div>
            </div>
            <!-- </div> -->
          </li>
        </ul>
        <ul class="list" v-if="sub_list.length >0">
          <li class="item" v-for="(item,index) in sub_list" :key="index">
            {{item.allowanceAt}}（第{{item.allowanceNum}}期）
            <img
              :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/icon_tempo_money.png'"
              alt
              class="icon"
              v-if="item.isSpeed==1 && current == 2"
            />
            <div class="num" :class="item.silver == 0 ?'height1':''" v-if="item.gold>0">
              {{item.gold}} 
             
            </div>
             <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/gold.png'"
                  alt
                  class="icon1 icon2" :class="item.silver == 0 ?'height2':''"
                  v-if="item.gold>0"
                />
            <div class="cash" :class="item.gold == 0 ?'height1':''"  v-if="item.silver>0">
               {{item.silver}}
             
            </div>
              <img
                  :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/silver.png'"
                  alt
                  class="icon1 icon3" :class="item.gold == 0 ?'height2':''"
                   v-if="item.silver>0"
                />
          </li>
        </ul>
        <div v-if="empty" class="empty">暂无待返金银币</div>
        <div v-if="empty" class="empty">暂无已返金银币</div>
      </div>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      list: "",
      sub_list: "",
      project_img: "",
      current: 1,
      membertext: "分享医美项目，即可享受补贴提速权益",
      leftnum: 0, //进度条的位置
      progressbarWidth: 0,
      isMember: 0,
      id: "",
      pre_coin: "",
      post_coin: "",
      text: "",
      isreturn_coin: 0,
      marknum: "",
      empty: false,
      isSpeed: "" //是否加速
    };
  },
  methods: {
    tabevent(e) {
      this.current = e;
      if (e == 1) {
        this.sub_list = this.list.preAllowanceLines;
      } else {
        this.sub_list = this.list.postAllowanceLines;
      }
      console.log(this.sub_list.length);
      if ((e == 1 || e == 2) && this.sub_list.length > 0) {
        this.empty = false;
      } else {
        this.empty = true;
      }
      // console.log(this.empty)
      // this.$forceUpdate()
    },
    get_Data() {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => {}
      });
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenUserAllowanceProvider/1.0.0/getAllowanceDetail.html",
        {
          // id: 128092
          id: this.id - 0
        },
        response => {
          wx.hideLoading();
          let res = response.data;
          if (res.code == 0) {
            this.list = res.data;
            this.current = 1;
            this.sub_list = this.list.preAllowanceLines;
            // console.log(this.sub_list + '00')
            if (this.current == 1 && this.sub_list.length > 0) {
              this.empty = false; //有数据不展示
            }
            this.project_img = this.imgUrl + res.data.projectImage;
            // 进度条的动态宽度
            this.leftnum =
              wx.getStorageSync("progressbarWidth") *
              (this.list.allowancedCount / this.list.applyCount);
            // this.leftnum = wx.getStorageSync("progressbarWidth") * (1 / 36);
            if (
              this.list.allowancedCount !== "36" &&
              this.list.suspend !== true
            ) {
              this.marknum = this.list.allowancedCount - 0 + 1;
              // console.log(this.marknum +'----185')
              this.text = "第" + this.marknum + "期待补贴";
            } else if (this.list.allowancedCount == 36) {
              this.text = "补贴完成";
              this.marknum = 36;
              // console.log(this.marknum +'----190')
            } else if (this.list.allowancedCount !== 36 && this.list.suspend) {
              this.marknum = this.list.allowancedCount - 0 + 1;
              this.text = "补贴单暂停";
            }
            // console.log(this.marknum)
            this.isreturn_coin =
              this.list.totalCredit - 0 - (this.list.awaitCredit - 0);
          } else {
            common.mmk_Loading(2, res.msg);
          }
        },
        "isjava"
      );
    },
    todetail() {
      if (this.isMember == 0) {
        wx.switchTab({
          url: "/pages/plus/main"
        });
        //非plus会员
      } else {
        wx.navigateTo({
          url: "/pages/package_mine/my_subsidy/main"
        });
      }
    },

    scroll() {}
    //轮播图跳转
  },

  onLoad(options) {
    wx.setNavigationBarTitle({
      title: "补贴单详情"
    });
    var obj = wx.createSelectorQuery();
    obj.selectAll(".progressbar").boundingClientRect(function(rect) {
      // this.progressbarWidth = rect[0].width
      wx.setStorageSync("progressbarWidth", rect[0].width);
      // console.log(wx.getStorageSync("progressbarWidth"));
    });
    obj.exec();
    this.id = options.id;
    console.log(options);
    this.isSpeed = options.isSpeed;
    this.isMember = wx.getStorageSync("user_data").is_plus;
    if (this.isMember !== 0) {
      //会员
      this.membertext = "分享医美项目，即可享受补贴提速权益";
    } else {
      //非会员
      this.membertext = "开通PLUS会员，即可享受补贴提速权益";
    }

    // this.leftnum = wx.getStorageSync("progressbarWidth") * (36 / 36);
    // console.log(this.leftnum)
    // this.marknum = 36;
    // if (this.marknum !== 36) {
    //   // this.marknum = this.list.allowancedCount - 0 + 1;
    //   this.text = "第" + this.marknum + "期待补贴";
    // } else {
    //   this.text = "补贴完成";
    // }
    this.get_Data();
  },
  onShow() {}
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  padding: 0 10px;
  overflow-y: auto;
  .scroll-view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .top {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    font-size: 12px;
    color: #999;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
    height: 238px;
    .info {
      width: 100%;
      display: flex;
      margin-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f2f2f2;
      .imgbox {
        width: 61px;
        height: 61px;
        border-radius: 6px;
        display: inline-block;
        margin-right: 10px;
        .headimg {
          width: 61px;
          height: 61px;
          border-radius: 6px;
        }
      }

      .right {
        display: inline-block;
        // background: red;
        .title {
          font-size: 14px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    .point {
      text-align: center;
      color: #424242;
      font-size: 14px;
      font-weight: 500;
      margin: 20px 0 4px 0;
      .num {
        display: inline-block;
        color: #ff4441;
      }
    }
    .desc {
      text-align: center;
      font-size: 12px;
      color: #999;
      .jinb {
        display: inline-block;
        position: relative;
        padding-right: 23px;
        color: #f5d040;
        .icon {
          width: 14px;
          height: 14px;
          position: absolute;
          right: 8px;
          top: 3%;
        }
      }
      .yinb {
        display: inline-block;
        position: relative;
        padding-right: 14px;
        color: #beccce;
        .icon {
          width: 14px;
          height: 14px;
          position: absolute;
          right: -1px;
          top: 3%;
        }
      }
    }
    .progress {
      box-sizing: border-box;
      margin: 18px 0 32px 0;
      position: relative;
      .progressbar {
        display: inline-block;
        width: 69%;
        height: 8px;
        background: rgba(255, 56, 62, 1);
        border-radius: 5px;
        margin: 0 10px;
        position: relative;
        .mark {
          position: absolute;
          height: 8px;
          // width: 30px;
          background: rgba(235, 235, 235, 1);
          border-radius: 5px;
          top: 0;
          left: 0;
          .item {
            width: 100%;
            height: 100%;
            position: relative;
            .icon {
              position: absolute;
              width: 20px;
              height: 20px;
              right: -6px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
      .tips {
        width: auto;
        height: 16px;
        background: rgba(255, 139, 139, 0.1);
        border-radius: 8px;
        color: rgba(255, 56, 62, 1);
        font-size: 10px;
        position: absolute;
        bottom: -27px;
        text-align: center;
        line-height: 16px;
        padding: 2px 4px;
      }
    }
  }
  .member {
    height: 40px;
    background: linear-gradient(
      360deg,
      rgba(39, 36, 36, 1) 0%,
      rgba(64, 67, 84, 1) 100%
    );
    border-radius: 10px;
    color: #ffe0aa;
    font-size: 14px;
    line-height: 40px;
    padding: 0 14px;
    position: relative;
    margin-top: 10px;
    .icon {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 14px;
      top: 37.5%;
    }
    .icon1 {
      width: 15px;
      height: 15px;
      display: inline-block;
      margin-right: 9px;
    }
  }
  .listbox {
    // width: 100%;
    height: 100%;
    flex: 1;
    background: #fff;
    margin-top: 10px;
    // position: relative;
    .tab {
      height: 62px;
      font-size: 14px;
      display: flex;
      border-radius: 10px 10px 0px 0px;
      // overflow: hidden;
      background: #ededed;
      color: #666;
      font-weight: 600;
      line-height: 42px;
      // margin-top: 10px;
      .item {
        // width: 50%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        .style1 {
          height: 18px;
          margin-top: 12px;
          line-height: 18px;
          margin-bottom: 2px;
          &.style2{
            height: 100%;
            line-height: 62px;
            margin-top: 0
          }
        }
        &.left {
          text-align: center;
          // padding-right: 20px;
        }
        &.right {
          text-align: center;
          // padding-left: 15px;
        }
        &.item1 {
          width: 50%;
          color: #ff383e;
          background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.1/bt/button_tab_left.png")
            no-repeat;
          background-size: 100% 100%;
          &::after {
            position: absolute;
            content: "";
            width: 20px;
            height: 10px;
            background: #fff;
            left: 0;
            bottom: 0;
          }
        }
        &.item2 {
          color: #ff383e;
          background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.1/bt/button_tab_right.png")
            no-repeat;
          background-size: 100% 100%;
          // text-align: right;
          width: 50%;
          // padding-right: 20px;
                // padding-right: 0;
        }
        &.item3 {
          width: 50%;
          position: relative;
    
          &::after {
            position: absolute;
            content: "";
            width: 20px;
            height: 10px;
            background: #ededed;
            right: 0;
            top: 0;
          }
        }
        &.item4 {
          width: 50%;
          position: relative;
          // padding-left: 15px;
          &::after {
            position: absolute;
            content: "";
            width: 20px;
            height: 10px;
            background: #ededed;
            left: 0;
            top: 0;
          }
        }
        .num {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          color: #999;
          .jinb {
            display: inline-block;
            position: relative;
            padding-right: 23px;
            color: #f5d040;
            .icon {
              width: 14px;
              height: 14px;
              position: absolute;
              right: 8px;
              top: 7%;
            }
          }
          .yinb {
            display: inline-block;
            position: relative;
            padding-right: 14px;
            color: #beccce;
            .icon {
              width: 14px;
              height: 14px;
              position: absolute;
              right: -1px;
              top: 7%;
            }
          }
        }
      }
    }

    .list {
      background: #fff;
      color: #666666;
      font-size: 14px;
      .item {
        height: 56px;
        line-height: 56px;
        position: relative;
        border-bottom: 1px solid #f2f2f2;
        box-sizing: border-box;
        padding: 0 27px 0 13px;
        .num {
          height: 18px;
          font-weight: 500;
          font-size: 14px;
          color: #333;
          position: absolute;
          right: 28px;
          top: 12px;
          display: inline-block;
          line-height: 18px;
          color: #F5D040;
          margin-bottom: 2px;
         
        }
        .cash {
          height: 18px;
          font-size: 14px;
          position: absolute;
          right:28px;
          bottom: 14%;
          line-height: 18px;
          color:#BECCCE;
        
        }
        .icon{
          width: 20px;
          height: 20px;
          position: absolute;
          left: 57%;
          top: 32%
        }
        .icon1 {
          width: 14px;
          height: 14px;
          position: absolute;
          right: 13px;
        }
        .icon2{
          top: 24%
        }
        .icon3{
          bottom: 19%
        }
        .height1{
          top: 33%
        }
        .height2{
          top: 35.5%;
        }
      }
    }
    .empty {
      // position: absolute;
      width: 100%;
      text-align: center;
      color: rgba(153, 153, 153, 1);
      font-size: 14px;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%,-50%)
      padding: 120px 0;
    }
  }
}
</style>

